<template>
  <div>
    <SearchForm @search="getTableData" @reset="resetSearch">
      <el-col :span="8" :xs="24" v-if="$permiss[1602]">
        <el-form-item :label="$t('所属租户')">
          <el-select v-model="page.adminUserId" @change="tenantChange" style="width: 100%" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24" style="display: flex">
        <el-form-item :label="$t('APP名称')" style="width: 100%;">
          <el-row :gutter="24" style="margin: 0">
            <el-col :span="11" style="padding: 0" v-show="$permiss[1601]">
              <el-select style="width: 100%" :placeholder="$t('请选择APP')" @change="selectProductVersion"
                         v-model="page.productName" clearable>
                <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                           :value="item.productName"></el-option>
              </el-select>
            </el-col>
            <el-col :span="1" style="text-align: center;padding: 0 10px">
              <div style="line-height: 32px;">-</div>
            </el-col>
            <el-col :span="11" style="padding: 0" v-show="$permiss[1611]">
              <el-select style="width: 100%" :placeholder="$t('请选择版本')" v-model="page.appVersion" clearable>
                <el-option v-for="item in productVersion" :key="item" :label="item"
                           :value="item"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('日期')">
          <el-date-picker
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              :picker-options="pickerOptions"
              :clearable="false"
              range-separator="~"
              unlink-panels
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <el-tabs v-model="activeName" @tab-click="getTableData">
        <el-tab-pane name="1" label="实时报表"></el-tab-pane>
        <el-tab-pane name="2" label="非实时报表"></el-tab-pane>
      </el-tabs>
      <Table :table-column="tableColumn" :loading="loading" :table-data="tableData" :page="false" max-height="500px"/>
    </el-card>
  </div>
</template>

<script>
import {selectProduct, selectTenant} from '@/api/system'
import {selectAuthReport, selectVersion, selectFixedAuthReport} from '@/api/user'
import {dateFormatSection, defaultTimeDate} from '@/utils/tools'

export default {
  name: "authentication",
  data() {
    return {
      page: {
        timeValue: defaultTimeDate(30)
      },
      tenantList: [],
      tableColumn: [
        {label: this.$t('日期'), prop: 'date', minWidth: 100,},
        {label: this.$t('获取验证码/安装'), prop: 'codeDinsRatio', minWidth: 120,},
        {label: this.$t('注册/获取验证码'), prop: 'regDcodeRatio', minWidth: 120,},
        {label: this.$t('实名/注册率'), prop: 'idnDregRatio', minWidth: 100,},
        {label: this.$t('个人/实名率'), prop: 'perDidnRatio', minWidth: 100,},
        {label: this.$t('工作/个人率'), prop: 'wkDperRatio', minWidth: 100,},
        {label: this.$t('联系人/工作率'), prop: 'ctDwkRatio', minWidth: 100,},
        {label: this.$t('运营商/联系人'), prop: 'opDctRatio', minWidth: 100,},
        {label: this.$t('银行/运营商'), prop: 'bkDopRatio', minWidth: 100,},
        {label: this.$t('申请/银行率'), prop: 'apDbkRatio', minWidth: 100,},
        {label: this.$t('申请/注册率'), prop: 'apDregRatio', minWidth: 100,},
      ],
      selectDate: null,
      productList: [],
      productVersion: [],
      pickerOptions: {
        onPick: ({maxDate, minDate}) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = null
          }
        },
        disabledDate: (time) => {
          // 最大可以选择前后31天时间
          if (this.selectDate !== null) {
            const dayNum = 30 * (24 * 60 * 60 * 1000)
            const minTime = this.selectDate - dayNum
            const maxTime = this.selectDate + dayNum
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      },
      tableData: [],
      loading: false,
      activeName: '1'
    }
  },
  mounted() {
    selectTenant().then(res => {
      this.tenantList = res.data
    })
    selectProduct().then(res => {
      this.productList = res.data
    })
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const [startTime, endTime] = dateFormatSection(this.page.timeValue)
      const params = {
        ...this.page,
        startTime, endTime
      }
      delete params.timeValue
      this.loading = true
      const api = (params) => this.activeName === '1' ? selectAuthReport(params) : selectFixedAuthReport(params)
      const res = await api(params)
      if (res.code === 1) {
        this.tableData = res.data
        this.loading = false
      } else {
        this.loading = false
      }
    },
    async selectProductVersion(value) {
      selectVersion({
        productName: value
      }).then(res => {
        this.productVersion = res.data
        this.$set(this.page, 'appVersion', null)
      })
    },
    tenantChange(value) {
      selectProduct({adminUserId: value}).then(res => {
        this.productList = res.data
        this.$set(this.page, 'productName', null)
      })
    },
    resetSearch() {
      this.page = {
        timeValue: defaultTimeDate(30)
      }
      this.getTableData()
    }
  }
}
</script>

<style scoped>

</style>
